<template>
  <div class="page-container flex-column-center">

    <div class="page-info-title">
      <p class="o7"></p>
      <p class="big">{{ week }},我最常去图书馆</p>
      <p class="o5">我所借阅书籍{{ per }}%，都是在{{ hour }}点</p>
    </div>

    <div class="page-main-box"></div>

    <img class="page-bg-title" src="@/assets/images/t2.png" />

  </div>
</template>
<script>

export default {
  name: 'pageBorrowWeek',
  props: ['reportData'],
  data () {
    return {
      week: '',
      per: '',
      hour: ''
    }
  },
  watch: {
    reportData: {
      immediate: true,
      handler (val) {
        if (val) {
          const d = JSON.parse(val.data6)
          this.week = d.weekBorrow.weekNum
          let total = 0
          d.hourBorrows.forEach(c => {
            total += c.borrowNum
          })
          d.hourBorrows.sort((a, b) => {
            return a.borrowNum - b.borrowNum
          })
          const max = d.hourBorrows[d.hourBorrows.length - 1]
          this.hour = max.hourNum
          this.per = (max.borrowNum / total * 100).toFixed(2)
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/assets/images/bg.png') no-repeat left top,
  linear-gradient(to top, #638f49 0%, #a5ca8f 50%, #a5ca8f 85%, #638f49 100%);
  background-size: 100%;
}
.page-main-box {
  background: transparent;
}
</style>
